<!DOCTYPE html>
 	<html lang="en">
 	<head>
 	    <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 	    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 	    <title>响应式网站</title>
 	    <link rel="stylesheet" href="lx6\css\bootstrap.css">
 	    <script src="lx6\js\jquery.min.js" type="text/javascript"></script>
     <script src="lx6\js\bootstrap.js" type="text/javascript"></script>
 	    <style>
 	        div{ margin: 0 auto;}
            img{ text-align: center; }
            td{ border: 1px solid black;padding: 0px;}
 	        h1{ text-align: center;}   
 	    </style>
 	</head>
 	<body>
 	    <nav class="navbar navbar-default" role="navigation">
 	        <div class="container-fluid" style="background-color:rgb(115, 235, 169)"> 
 	        <div class="navbar-header">
            <a class="navbar-brand" href="#">响应式网站</a>
 	            <button type="button" class="navbar-toggle" data-toggle="collapse"
 	                    data-target="#xysdh-navbar-collapse">
 	                <span class="sr-only">切换导航</span>
	                <span class="icon-bar"></span>
	                <span class="icon-bar"></span>
 	                <span class="icon-bar"></span>
 	            </button>
 	            
 	        </div>
 	        <div class="collapse navbar-collapse" id="xysdh-navbar-collapse">
 	            <ul class="nav navbar-nav">
	                        <li><a href="#mul">九九乘法表</a></li>
 	                        <li><a href="#science">著名科学家介绍</a></li>
	                        <li><a href="#contact">联系我们</a></li>
	                        <li><a href="#online">在线提问</a></li>
	                    </ul>
	                </li>
	            </ul>
 	        </div>
 	        </div>
 	    </nav>
 	    <div class="container-fluid" style="display: block;position: relative">
 	        <div id="mul">
 	            <h1>九九乘法表</h1>
 	            <div id="b1" style="display: block">
 	                <script type="text/javascript">
 	                    document.write("<table align='center'>");
                            for (x=1;x<=9;x++)  
                           {  
                             document.write("<tr>");  
                        
                              for (y=1;y<=x;y++)  
                              { 
                                document.write("<td>");
                                document.write("&nbsp"+x+"*"+y+"="+x*y+"&nbsp;&nbsp"); 
                                document.write("</td>");
                              }  
                             document.write("</tr>");
                            }  
                             document.write("</table>");
 	                </script>
 	            </div>
 	            <div id="b2" style="display: none">
 	                <script type="text/javascript">
 	                    for(x=1;x<=9;x++)
                         {
 	                        document.write("<table align='center'>");
 	                        document.write("<tr>");
 	                        for( y=1;y<=x;y++)
                             {
 	                            document.write("<td >");
 	                            document.write("&nbsp"+x+"*"+y+"="+x*y+"&nbsp;&nbsp");
 	                            document.write("</td>");
 	                        }
 	                        document.write("</tr>");
 	                    }
 	                    document.write("</table>");
 	                </script>
 	                </div>
 	            <br>
 	            <div style="text-align: center;">
 	                <button type="button" class="btn btn-info" onclick="mul1()" style="background-color: blue;">直角型九九乘法表</button>
 	                <button type="button" class="btn btn-info" onclick="mul2()" style="background-color: blue;">等腰型九九乘法表</button>
 	                <script type="text/javascript">
 	                    function mul1() {
 	                        if(document.getElementById("b1").style.display=="none"){
 	                            document.getElementById("b1").style.display="block"
 	                            document.getElementById("b2").style.display="none"
 	                        }
 	                    }
 	                </script>
                     <script type="text/javascript">
                        function mul2() {
                            if(document.getElementById("b1").style.display=="block"){
                                document.getElementById("b1").style.display="none"
                                document.getElementById("b2").style.display="block"
                            }
                        }
                    </script>
 	            </div>
 	        </div>
 	    </div>
 	    <div class="container">
 	        <div id="science">
 	            <div class="row">
 	                <h1>著名科学家介绍</h1>
 	                <div class="col-md-6 col-xs-12" style="text-align: center;">
 	                    <p style="text-align: center;">牛顿</p>
 	                    <img src="lx6\images\newton.PNG"  alt="newton">
	                    <p>艾萨克·牛顿（1643年1月4日—1727年3月31日）爵士，英国皇家学会会长，英国著名的物理学家，百科全书式的“全才”，著有《自然哲学的数学原理》、《光学》。在力学上，牛顿阐明了动量和角动量守恒的原理，提出牛顿运动定律。在光学上，他发明了反射望远镜，并基于对三棱镜将白光发散成可见光谱的观察，发展出了颜色理论。他还系统地表述了冷却定律，并研究了音速。在经济学上，牛顿提出金本位制度。</p>
 	                </div>

 	                <div class="col-md-6 col-xs-12" style="text-align: center;">
 	                    
 	                    <p style="text-align: center;">莱布尼茨</p>
 	                    <img src="lx6\images\lbnc.jpg" alt="lbnc">
 	                    <p>戈特弗里德·威廉·莱布尼茨（Gottfried Wilhelm Leibniz，1646年7月1日－1716年11月14日），德国哲学家、数学家，历史上少见的通才，被誉为十七世纪的亚里士多德。莱布尼茨在数学史和哲学史上都占有重要地位。在数学上，他和艾萨克·牛顿先后独立发现了微积分，而且他所使用的微积分的数学符号被更广泛的使用，莱布尼茨所发明的符号被普遍认为更综合，适用范围更加广泛。</p>
 	                    <br>
 	                </div>

                     <div class="col-md-6 col-xs-12" style="text-align: center;">
                        <p style="text-align: center;">特斯拉</p>
                        <img src="lx6\images\tsl.jpg" alt="tsl" width="200" height="250">
                        <p>尼古拉·特斯拉（Nikola Tesla，1856年7月10日—1943年1月7日），塞尔维亚裔美籍发明家、物理学家、机械工程师、电气工程师。1897年，他使马可尼的无线电通信理论成为现实。1898年，他制造出世界上第一艘无线电遥控船，无线电遥控技术取得专利。1899年，他发明了X光（X-Ray）摄影技术。</p>
                        
                    </div>
 	
 	                <div class="col-md-6 col-xs-12" style="text-align: center;">
 	                    <p style="text-align: center;">爱迪生</p>
 	                    <img src="lx6\images\ads.jpg" alt="ads">
 	                    <p>托马斯·阿尔瓦·爱迪生（Thomas Alva Edison，1847年2月11日—1931年10月18日），出生于美国俄亥俄州米兰镇，逝世于美国新泽西州西奥兰治。世界著名的发明家、物理学家、企业家，拥有众多知名重要的发明专利超过2000项。包括对世界极大影响的留声机、电影摄影机、钨丝灯泡等。被传媒授予“门洛帕克的奇才”称号!美国《生活》杂志评选出千年来全球最有贡献的一百位人物，发明电灯的美国发明家爱迪生名列榜首。爱迪生被美国的权威期刊《大西洋月刊》评为影响美国的100位人物第9名。</p>
 	                </div>
 	            </div>
 	        </div>
 	    </div>
 	    <div  class="container">
 	        <div id="contact">
 	            <div class="row">
 	            <div class="col-md-6" >
 	                <h1>联系我们</h1>
 	                <dl>
 	                    <dt>联系方式</dt>
 	                    <dd>地址：河南省信阳师范学院</dd>
 	                    <dd>邮编：464000</dd>
 	                    <dd>网址：http://www.xynu.edu.cn/</dd>
 	                    <dd>电话：12345678910</dd>
 	                </dl>
 	            </div>
 	            <div id="online">
 	               <div class="col-md-6">
                        <h1>在线提问</h1>
                        <from method="post" action="contact-post.html">
                            <div><span>姓名</span>
                            <span>
                                <input type="text"class="form-control" id="uersname" placeholder="请输入姓名">
                            </span>
                        </div>
                        <div>
                            <span>电子邮箱</span>
                            <span>
                                <input type="email"class="form-control"id="inputEmail" placeholder="请输入邮箱">
                            </span>
                        </div>
                        <div>
                            <span>问题</span>
                            <span><textarea name="userMsg" placeholder="请输入你的问题" ></textarea>
                            
                            </span>
                        </div>
                        <div>
                            <label class="fa-btn"><input type="submit" value="提交"></label>
                        </div>
                        
                        </from>
                    </div>
 	            </div>
 	        </div>
 	    </div>
 	</body>
 	</html>